<template>
<!--    审核参加者-->
    <div>
        <el-card class="box-card" v-for="(item, index) in list" :key="index" style="margin-bottom: 30px">
            <div style="display: flex;justify-content: space-between;align-items: center">
                <h4>{{item.title}}</h4>
                <div>
                    <el-button type="text" @click="audits(item.activity_id, index)">审核参加者</el-button>
                    <el-button type="text" @click="chakan(item.activity_id, index)" style="color: gray;margin-left: 20px">查看参加者</el-button>
                </div>
            </div>
            <div style="margin-top: 10px">{{item.content}}</div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">限{{item.people}}参加</div>
                    <div style="margin-top: 10px">类型：{{item.type}}</div>
                </div>
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">报名结束时间：{{item.sign_up_end_time}}</div>
                    <div style="margin-top: 10px">活动结束时间：{{item.end_time}}</div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 12px;margin-top: 10px">专业：{{item.professional}}</div>
                <div style="font-size: 12px;margin-top: 10px">备注：{{item.note}}</div>
            </div>
            <div v-show="isapply">
                <div v-show="num == index">
                    <div class="hr"></div>
                    <div style="margin-top: 20px">报名表：</div>
                    <div style="overflow: hidden;padding-bottom: 20px" >
                        <div class="box" v-for="(a, b) in list1" :key="b">
                            <div>参加人：{{a.name}}</div>
                            <div style="margin-top: 10px">联系方式：{{a.phone}}</div>
                            <div style="margin-top: 10px">专业：{{a.professional}}</div>
                            <div style="margin-top: 10px">参加人数：{{a.sign_up_people}}</div>
                            <div style="float: right;margin-top: 10px">
                                <el-button type="primary" icon="el-icon-check" circle @click="tuoyi(a.sign_up_id, item.activity_id, a.sign_up_people)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="jujue(a.sign_up_id, item.activity_id, a.sign_up_people)"></el-button>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="mores" v-show="ismores">加载更多报名人</div>
                </div>
            </div>
            <div v-show="!isapply">
                <div v-show="num == index">
                    <div class="hr"></div>
                    <div style="margin-top: 20px">报名表：</div>
                    <div style="overflow: hidden;padding-bottom: 20px" >
                        <div class="box" v-for="(a, b) in list2" :key="b">
                            <div>参加人：{{a.name}}</div>
                            <div style="margin-top: 10px">联系方式：{{a.phone}}</div>
                            <div style="margin-top: 10px">专业：{{a.professional}}</div>
                            <div style="margin-top: 10px">参加人数：{{a.sign_up_people}}</div>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more2" v-show="ismore2">加载更多人</div>
                </div>
            </div>

        </el-card>
        <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more" v-show="ismore">加载更多</div>
    </div>
</template>

<script>
    import {getallactivity, getaudit, adminaudit} from '../api/api'
    export default {
        name: "audit",
        data(){
            return{
                n:1,
                ismore:true,
                list:[],
                list1:[],
                list2:[],
                ismores:true,
                ismore2:true,
                h:1,
                m:1,
                activity_id:0,
                num:-1,
                isapply:true
            }
        },
        methods:{
            //同意
            tuoyi(sign_up_id, activity_id, sign_up_people){
                adminaudit(sign_up_id, activity_id, 1, sign_up_people).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.$router.go(0)
                    }
                })
            },
            //拒绝
            jujue(sign_up_id, activity_id, sign_up_people){
                adminaudit(sign_up_id, activity_id, 2, sign_up_people).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.$router.go(0)
                    }
                })
            },
            audits(activity_id, index){
                this.isapply = true
                this.num = index
                this.activity_id = activity_id
                this.gets(this.m)
            },
            chakan(activity_id, index){
                this.isapply = false
                this.num = index
                this.activity_id = activity_id
                this.get2(this.h)
            },
            //获取已参加的人
            get2(sum){
                getaudit(this.activity_id, 1, sum).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismore2 = false
                        }
                        this.list2 = this.list2.concat(res.data)
                    }
                })
            },
            more2(){
                this.h++
                this.get2(this.h)
            },
            //获取参加的人
            gets(sum){
                getaudit(this.activity_id, 0, sum).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismores = false
                        }
                        this.list1 = this.list1.concat(res.data)
                    }
                })
            },
            mores(){
                this.m++
                this.gets(this.m)
            },
            get(n){
                getallactivity(n).then(res=>{
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismore = false
                        }
                        this.list = this.list.concat(res.data)
                    }
                    // console.log(res)
                })
            },
            more(){
                this.n++
                this.get(this.n)
            }
        },
        created() {
            this.get(this.n)
        }

    }
</script>

<style scoped>
    .hr {
        width: 100%;
        height: 1px;
        background-color: #c7e5eb;
        margin-top: 20px;
    }
    .box {
        float: left;
        margin-top: 20px;
        margin-right: 10px;
        width: 200px;
        box-shadow: 5px 5px 5px gray;
        padding: 10px;
    }
</style>
